<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>Examples</title>
    <meta content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0,user-scalable=no" name="viewport" />
    <meta name="description" content="">
    <meta name="keywords" content="">
    <link href="" rel="stylesheet">
</head>
<style>
    * {
        margin: 0px;
        padding: 0px;
    }

    html,
    body {
        width: 100%;
        height: 100%
    }

    .content {
        background: #fff;
        text-align: center;
        background: #fff;
        /* position: absolute;
        left: 0px;
        top: 0px; */
        width: 100%;
    }

    .content div {
        text-align: right;
        font-size: 58px;
        line-height: 200px;
        padding-right: 20px;
        background: #ccc;
        margin-bottom: 2px;
        color: #222
    }

    .menu {
        width: 80%;
        height: 100%;
        background: #fff;
        position: fixed;
        left: 0px;
        top: 0px;
        z-index: 300;
        transform: translate3d(-100%, 0px, 0px);
        -webkit-transform: translate3d(-100%, 0px, 0px);
        transition: all 0.4s ease;
        -webkit-transition: all 0.4s ease
    }

    .icon {
        width: 40px;
        height: 40px;
        background: red;
        position: absolute;
        right: -50px;
        top: 10px;

    }

    .menu .wrap {
        width: 100%;
        height: 100%;
        overflow: auto;
        -webkit-overflow-scrolling: touch;
        box-shadow: 0px 0px 2px #222
    }

    .menu .wrap p {
        text-align: center;
        font-size: 20px;
        border-bottom: 1px solid #f0f0f0;
        line-height: 45px;
    }

    .menu.show {
        transform: translate3d(-0%, 0px, 0px);
        -webkit-transform: translate3d(-0%, 0px, 0px)
    }
</style>

<body>
    <div class="menu">
        <div class="icon"></div>
        <div class="wrap">
            <div class="wrap_con">
                <p>1</p>
                <p>2</p>
                <p>3</p>
                <p>4</p>
                <p>5</p>
                <p>6</p>
                <p>7</p>
                <p>8</p>
                <p>9</p>
                <p>10</p>
                <p>11</p>
                <p>12</p>
                <p>13</p>
                <p>14</p>
                <p>15</p>
                <p>16</p>
                <p>17</p>
                <p>18</p>
                <p>19</p>
                <p>20</p>
            </div>
        </div>
    </div>
    <div class="content">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
        <div>5</div>
        <div>6</div>
        <div>7</div>
        <div>8</div>
        <div>9</div>
    </div>
</body>
<script>
    window.onload = function () {
        var menu = document.querySelector('.menu');
        /* android */
        var icon = document.querySelector('.icon');
        var content = document.querySelector('.content');
        var off = false; //打开的开关
        icon.onclick = function () {
            off = true;
            menu.classList.add('show'); //添加动画
           // menu.style.height = window.innerHeight + 'px'; //给菜单添加高度
        //    console.log(icon.style)
        //    console.log(menu.style.height)
        //    console.log(window.innerHeight)
            document.body.style.overflow = 'hidden' //给body设置超出隐藏
        };
        content.onclick = content.ontouchstart = content.ontouchmove = function () {
            if (off) { //判断开关，防止多次触发
                menu.classList.remove('show'); //删除class
                menu.removeAttribute('style'); //删除style
                document.body.removeAttribute('style'); //删除style
            };
            off = false; //关闭开关
        };


        /* 下面兼容ios的bug */
        var obj = document.querySelector('.wrap');
        var wrap_con = document.querySelector('.wrap_con');
        var h = wrap_con.offsetHeight; //滚动内容的实际高度
        var y = 0,
            y2 = 0; //y坐标变量
        obj.addEventListener('touchstart', function (ev) {
            y = ev.changedTouches[0].pageY;
        }, false);
        obj.addEventListener('touchmove', function (ev) {
            var h2 = window.innerHeight; //屏幕高度
            h = h < h2 ? h2 : h; //内容不够滚动的时候，设置高度，不然有bug
            var h3 = Math.abs(h2 - h); //可滚动的高度
            y2 = ev.changedTouches[0].pageY;
            if (y < y2) { //向下滚动
                if (this.scrollTop <= 0) { //到顶部
                    ev.preventDefault(); //阻止默认事件
                    return false;
                };
            };
            if (y2 < y) { //向上滚动
                if (this.scrollTop >= h3) { //到底部
                    ev.preventDefault(); //阻止默认事件
                    return false;
                };
            };
            ev.stopPropagation(); //阻止冒泡
        }, false);
    }
</script>

</html>